<template>
  <div style="padding: 6px;">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="选择月" prop="month">
        <el-date-picker v-model="queryParams.month" type="month" placeholder="选择月" format="yyyy-MM" value-format="yyyy-MM" @change="loadWorkLog"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="loadWorkLog" v-if="false">查询</el-button>
        <el-button type="primary" icon="el-icon-plus"   size="mini" @click="addWorkLog" v-if="false">添加</el-button>
      </el-form-item>
    </el-form>

    <el-timeline>
      <el-timeline-item :timestamp="item.logDate" placement="top" v-for="(item,index) in workLogList" :key="item.logDate">
        <el-card class="mycard">
          <div style="padding: 10px;" v-for="mx in item.logDateMx" :key="mx.id">
            <el-tag size="mini">{{mx.useHour}}小时</el-tag>&nbsp;&nbsp;<span class="logtext">{{mx.logText}}</span>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import request from '@/utils/request'
import dayjs from 'dayjs'

export default {
  components: {  },
  data() {
    return {
      queryParams: {
        month : dayjs().startOf('month').format("YYYY-MM"),
        pageNum: 1,
        pageSize: 500
      },
      workLogList: [],

      entityDetailVisible : false,
      popupTitle : '',
      popupEntityId : 0,
    }
  },
  mounted() {
    this.loadWorkLog()
  },
  methods: {
    loadWorkLog() {
      if(!this.queryParams.month){
        this.$message.warning("请选择月份")
        return
      }
      request({
        url: '/worklog/worklogmonth',
        data: this.queryParams
      }).then(res => {
        const { data } = res
        this.workLogList = data
      })
    },
  }
}
</script>
<style scoped>
::v-deep .mycard .el-card__body{
  padding: 0;
}
::v-deep .logtext{
  font-size: 12px;
  color: #666666;
  letter-spacing: 1px;
}
.el-button--mini, .el-button--mini.is-round{
  padding: 3px 6px;
  font-size: 14px;
}
</style>
